<template>
  <GameHeader />

  <div class="content">
    <ChatRoom @bet="openBetPopup" v-show="isShowChatRoom" />

    <RouterView v-slot="{ Component }">
      <component :is="Component" ref="investDom" />
    </RouterView>
  </div>
  <scratch v-if="appStore.isMipai" />

  <!--  <csPopup />-->
  <Rules ref="rulesDom" :index="index" />

  <Teleport to="body">
    <div v-if="!appStore.isProBet">
      <FloatingBubble v-model:offset="offset" axis="xy" magnetic="x" :gap="0" @click="changeHallWindow">
        <img class="icon" src="@/assets/img/game/pro-btn.gif" alt="" />
      </FloatingBubble>
      <div
        :class="{ leftTips: tipsOffset.isLeft, hide: isHideTips }"
        :style="{ left: tipsOffset.left, top: tipsOffset.top, right: tipsOffset.right }"
        class="bubble-tips"
      >
        <span>点击可以切换到专业版</span>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, computed, watch, watchEffect, defineAsyncComponent } from 'vue'
import { FloatingBubble } from 'vant'
import GameHeader from '@/components/game/header/header.vue'
import { useInvestStore } from '@/stores/invest'
import { useAppStore } from '@/stores/app'
import { useRoute } from 'vue-router'
import { changeHallModel } from '@/utils/postMessage'
// 异步引入
const Rules = defineAsyncComponent(() => import('@/views/rule/index.vue'))
const Scratch = defineAsyncComponent(() => import('@/components/scratch/index.vue'))
// const csPopup = defineAsyncComponent(() => import('@/components/cs-popup.vue'))
const ChatRoom = defineAsyncComponent(() => import('@/components/chatroom/index.vue'))

const investDom = ref()
const rulesDom = ref()

const investStore = useInvestStore()

const appStore = useAppStore()

const route = useRoute()

const isShowChatRoom = computed(() => !appStore.isProBet && route.path.includes('/bet'))

const index = computed(() => investStore.index)

watch(
  () => investStore.rulesShow,
  (newValue) => {
    if (newValue) rulesDom.value.openRulesPopup()
  },
  { immediate: true },
)

const openBetPopup = () => {
  investDom.value?.open?.()
  investStore.findRepetitionBet() //获取最近一期下注
}

const isHideTips = ref(false)

const hideTimer = ref(null)

watch(
  () => appStore.isProBet,
  async () => {
    if (hideTimer.value) {
      clearTimeout(hideTimer.value)
      hideTimer.value = null
    }
    isHideTips.value = false
    hideTimer.value = setTimeout(() => {
      isHideTips.value = true
    }, 2000)
  },
  { immediate: true },
)

const changeHallWindow = () => changeHallModel()

const offset = ref({
  x: -1,
  y: 420,
})

const tipsOffset = ref({
  top: 'auto',
  left: 'auto',
  right: 'auto',
  isLeft: false,
})

watchEffect(() => {
  tipsOffset.value.top = offset.value.y - 40 + 'px'
  if (offset.value.x === -1) {
    tipsOffset.value.left = 'auto'
    tipsOffset.value.right = '5px'
  } else {
    const w = document.documentElement.clientWidth || document.body.clientWidth
    tipsOffset.value.isLeft = w / 2 > offset.value.x
    tipsOffset.value.left = (tipsOffset.value.isLeft ? offset.value.x + 5 : offset.value.x - 110) + 'px'
    tipsOffset.value.right = 'auto'
  }
})
</script>

<style lang="less">
.content {
  position: relative;
  height: calc(100% - 159px);
}
.versionBtn {
  width: 90px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px 0 0 22px;
  position: fixed;
  bottom: 160px;
  right: 0;
  z-index: 999999;
  color: #77709f;
  background: linear-gradient(160.16deg, #fcfdff -0.56%, #e5eeff 98.05%);
  opacity: 0.8;
}
.van-floating-bubble {
  width: 46px;
  height: 62px;
  border-radius: 0;
  background: none;
  .icon {
    max-width: 100%;
  }
}
.bubble-tips {
  width: 148px;
  height: 46px;
  background: url('@/assets/img/game/pro-tips.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 7px;
  box-sizing: border-box;
  font-family: PingFang SC;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  position: absolute;
  z-index: 9;
  &.leftTips {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    span {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
    }
  }
  &.hide {
    animation: hideTips 0.5s ease-in-out forwards;
    -webkit-animation: hideTips 0.5s ease-in-out forwards;
    -moz-animation: hideTips 0.5s ease-in-out forwards;
    @keyframes hideTips {
      100% {
        opacity: 0;
        display: none;
      }
    }
    @-webkit-keyframes hideTips {
      100% {
        opacity: 0;
        display: none;
      }
    }
    @-moz-keyframes hideTips {
      100% {
        opacity: 0;
        display: none;
      }
    }
  }
}
</style>
